<script setup>

import CreateModal from "@/pages/Cameras/createModal/index.vue";
import CopyModal from "@/pages/Cameras/copyModal/index.vue";
import {onMounted, reactive, ref} from "vue";
// type: 1 Continuous
// type: 2 Motion only
// type: 3 Sound only
// type: 4 Motion or Sound
// type: 5 Motion and Sound
const data = ref([
  {
    week: 'Mon',
    cells: [
      {id: 1, type: 1, color: '#216FC8', startTime: '08:00', endTime: '20:00'},
    ]
  },
  {
    week: 'Tue',
    cells: [
      {id: 1, type: 2, color: '#23A672', startTime: '00:00', endTime: '08:00'},
      {id: 2, type: 1, color: '#216FC8', startTime: '08:00', endTime: '20:00'},
      {id: 3, type: 2, color: '#23A672', startTime: '20:00', endTime: '24:00'},
    ]
  },
  {
    week: 'Wed',
    cells: [
      {id: 1, type: 3, color: '#E5AD36', startTime: '00:00', endTime: '08:00'},
      {id: 2, type: 1, color: '#216FC8', startTime: '08:00', endTime: '20:00'},
      {id: 3, type: 3, color: '#E5AD36', startTime: '20:00', endTime: '24:00'},
    ]
  },
  {
    week: 'Thu',
    cells: [
      {id: 1, type: 4, color: '#D17069', startTime: '00:00', endTime: '08:00'},
      {id: 2, type: 1, color: '#216FC8', startTime: '08:00', endTime: '20:00'},
      {id: 3, type: 4, color: '#D17069', startTime: '20:00', endTime: '24:00'},
    ]
  },
  {
    week: 'Fri',
    cells: [
      {id: 1, type: 5, color: '#961A49', startTime: '00:00', endTime: '08:00'},
      {id: 2, type: 1, color: '#216FC8', startTime: '08:00', endTime: '20:00'},
      {id: 3, type: 5, color: '#961A49', startTime: '20:00', endTime: '24:00'},
    ]
  },
  {
    week: 'Sta',
    cells: []
  },
  {
    week: 'Sun',
    cells: []
  }
])

const cellColor = ref([
  {color: '#216FC8', desc: 'Continuous'},
  {color: '#23A672', desc: 'Motion only'},
  {color: '#E5AD36', desc: 'Sound only'},
  {color: '#D17069', desc: 'Motion or Sound'},
  {color: '#961A49', desc: 'Motion and Sound'},
])
// 抽屉
const drawer = ref(false)
const openDrawer = () => {
  drawer.value = true;
};
const params = ref([
  {desc: 'Recording Type', data: 'Mainstream'},
  {desc: 'File Type', data: 'MP4'},
  {desc: 'Video Codec', data: 'Copy'},
  {desc: 'Audio Codec', data: 'No Audio'},
  {desc: 'Timelapse', data: 'Enabled. Every 10mins.'},
])
// 弹窗
const createModal = ref(null)
const openModal = () => {
  createModal.value.showModal(1)
}
// 编辑
const EditRule = () => {
  createModal.value.showModal(2)
}

// Copy to Cameras
const copyModal = ref(null)
const openCopyModal = () => {
  console.log('copyModal.value', copyModal.value)
  copyModal.value.showModal()
}
</script>

<template>
  <div>
    <div
      class="text-[#9CA3AF] font-Medium font-[500] flex flex-row justify-between mt-[24px] ml-[32px] mb-[16px] s4k:mt-[48px] s4k:ml-[64px] s4k:mb-[32px] s2k:mt-[32px] s2k:ml-[42.6px] s2k:mb-[21.3px]">
      <div>
        <p class="text-[1.3rem] themeFontDescColor">Recording Schedule</p>
        <p class="text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">Click and drag on a rectangle to create a
          schedule</p>
      </div>
      <div class="mr-[32px] s2k:mr-[42.6px] s4k:mr-[64px]">
        <button
          class="bg-[var(--theme-button-bg)] font-bold w-[148px] h-[41px] text-[1.13rem] text-[var(--theme-font-color)] rounded-lg cursor-pointer mr-[8px] s4k:w-[296px] s4k:h-[82px] s4k:mr-[16px] s2k:w-[197.3px] s2k:h-[54.6px] s2k:rounded-[10.6px] s2k:mr-[10.6px]"
          @click="openCopyModal">Copy to Cameras
        </button>
        <button
          class="bg-[#1C64F2] w-[148px] h-[41px] leading-[41px] text-[1.13rem] text-white rounded-lg cursor-pointer s4k:w-[296px] s4k:h-[82px] s4k:leading-[82px] s2k:w-[197.3px] s2k:h-[54.6px] s2k:rounded-[10.6px] s2k:leading-[54.6px]"
          @click="openModal">New Schedule
        </button>
      </div>
    </div>
    <div class="w-[calc(100%_-_64px)] h-[24px] m-auto flex flex-row s4k:w-[calc(100%_-_128px)] s4k:h-[48px] s2k:w-[calc(100%_-_85.3px)] s2k:h-[32px]">
      <div
        class="flex-[1] flex flex-row justify-end text-start themeFontDescColor text-[1.3rem] font-[500]">
        0
      </div>
      <div class="flex-[1] flex flex-row justify-end themeFontDescColor text-[1.3rem] font-[500]"
           v-for="num in 24" :key="num">{{ num }}
      </div>
    </div>
    <div class="w-[calc(100%_-_64px)] m-auto s4k:w-[calc(100%_-_128px)] s2k:w-[calc(100%_-_85.3px)]" @click="openDrawer">
      <TimeCell v-for="v in data" :key="v.week" :weekData="v"/>
    </div>
    <div class="flex flex-row justify-center items-center mt-[15px] s2k:mt-[20px] s4k:mt-[48px]">
      <div v-for="cell in cellColor" :key="cell.color"
           class="flex flex-row justify-start items-center mx-[18px] s2k:mx-[24px] s4k:mx-[36px]">
        <div class="w-[24px] h-[24px] rounded-[4px] s2k:w-[32px] s2k:h-[32px] s4k:w-[48px] s4k:h-[48px]" :style="{background: cell.color}"></div>
        <div class="text-[1.13rem] font-[400] ml-[12px] s2k:ml-[16px] s4k:ml-[24px] themeFontColor">{{ cell.desc }}</div>
      </div>
    </div>
    <el-drawer v-model="drawer" :modal="false" :with-header="false" class="relative">
      <div class="w-full flex flex-row justify-between items-center gridData-center s2k:mt-[8px] s4k:mt-[25px]">
        <span class="text-[1.3rem] font-[500] text-[#9CA3AF]">RECORDING RULE</span>
        <img src="@/assets/image/close.png" alt="" class="w-[12px] h-[12px] cursor-pointer s2k:w-[16px] s2k:h-[16px] s4k:w-[24px] s4k:h-[24px]"
             @click="drawer = false"/>
      </div>
      <div class="absolute w-full h-[1px] bg-[var(--grid)] top-[56px] left-0 s2k:top-[74px] s4k:top-[112px]"></div>
      <div class="mt-[16px] s4k:mt-[32px] s2k:mt-[21.3px]">
        <div class="text-[1.66rem] text-[var(--theme-font-color)] font-[500] mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">Continuous Recording
        </div>
        <div class="flex flex-col justify-center items-start font-Inter mt-[24px] s2k:mt-[32px] s4k:mt-[48px]" v-for="item in params"
             :key="item.desc">
          <div class="text-[#9CA3AF] text-[1.3rem] font-[400]">{{ item.desc }}</div>
          <div class="text-[var(--theme-font-color)] text-[1.3rem] font-[400] mt-[4px] s2k:mt-[5.3px] s4k:text-[32px]">{{ item.data }}</div>
        </div>
      </div>
      <div
        class="absolute w-full h-[73px] bottom-0 left-0 border-t border-solid border-[var(--grid)] flex flex-row justify-center items-center s4k:h-[146px] s2k:h-[97.3px]">
        <div
          class="w-[140px] h-[41px] border border-solid border-[var(--grid)] rounded-lg text-[#9CA3AF] text-[1.13rem] font-[500] flex flex-row justify-center items-center cursor-pointer s4k:w-[280px] s4k:h-[82px] s2k:w-[186.6px] s2k:h-[54.6px] s2k:rounded-[10.6px]"
          @click="drawer = false">Close
        </div>
        <div
          class="w-[140px] h-[41px] bg-[#4B5563] rounded-lg text-md text-white font-[500] flex flex-row justify-center items-center ml-[8px] cursor-pointer s4k:w-[280px] s4k:h-[82px] s4k:text-[28px] s4k:ml-[16px] s2k:w-[186.6px] s2k:h-[54.6px] s2k:rounded-[10.6px] s2k:ml-[21.3px]"
          @click="EditRule">Edit Rule
        </div>
      </div>
    </el-drawer>
    <CreateModal ref="createModal"/>
    <CopyModal ref="copyModal"/>
  </div>
</template>

<style scoped lang="scss">
</style>